<template>
    <div class="list">
        <div class="mp-group-title flex">
            <img src="../../../assets/image/like.png" alt="">
            <span class="mp-title">猜你喜欢</span>
        </div>
        <ul class="mp-like-list">
            <li class="mp-like-item flex" v-for="(item,index) in list" :key="index">
                <img class="img" :src="item.imgUrl" alt="">
                <div class="right flex">
                    <div class="r-left">
                        <p class="name">{{item.title}}</p>
                        <p class="detail">{{item.desc}}</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default{
        name:'List',
        props:['list']
    }
</script>

<style scoped lang="less">
    .flex{
        display: flex;
    }
    .list {
        padding: .3rem;
        .mp-group-title{
            align-items: center;
            img {
                width: .3rem;
                height: .3rem;
            }
            .mp-title{
                margin-left: .08rem;
                height: .44rem;
                color: #212121;
                font-size: .28rem;
                line-height: .44rem;
            }
        }
        .mp-like-list{
            .mp-like-item{
                position: relative;
                overflow: hidden;
                padding: .2rem 0;
                .img{
                    width: 2rem;
                    height: 2rem;
                    background-size: 2rem 2rem;
                }
                .right {
                    align-items: center;
                    .r-left{
                        .name {
                            font-size: .3rem;
                        }
                        .detail {
                            color: rgb(151, 151, 151);
                        }
                        p{
                            padding: .3rem;
                        }
                    }
                }
            }
        }
    }
</style>